<template>
    <Card style="min-height:500px;">			
        <!--标题-->
        <p slot="title">
            <Icon type="ios-list-outline"></Icon> 交付统计
        </p>			
        <!--标题end-->

        <!--搜索条件-->
        <Row :gutter="8">
            <Col span="3">
                <Select v-model="device_type">
                    <Option v-for="item in list1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>

            <Col span="7">
                <Select v-model="city" filterable multiple placeholder="地区选择">
                    <Option v-for="item in cities" :value="item.short_name" :key="item.short_name">{{ item.name }}</Option>
                </Select>
            </Col>

            <Col span="7">
                <Select v-model="device_model" multiple placeholder="设备型号">
                    <Option v-for="item in device_models" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
            </Col>

            <Col span="5">
                <DatePicker type="daterange" 
                placement="bottom"
                placeholder="选择时间段" 
                v-model="time">
                </DatePicker>
            </Col>

            <Col span="2">
                <Button 
                type="primary" 
                icon="ios-search" 
                @click="getData">搜索</Button>
            </Col>
        </Row>   
        <!--搜索条件end-->	
                
        <br>
        <br>
        <Row type="flex" justify="center" align="middle" class="delivery-table delivery-table-head">
            <Col span="5">交付时间</Col>
            <Col span="5">设备类型</Col>
            <Col span="5">设备型号</Col>
            <Col span="4">数量</Col>
            <Col span="5">操作</Col>
        </Row>

        <!-- 交付统计表格 -->
        <Row 
        type="flex" 
        justify="center" 
        align="middle" 
        class="delivery-table" 
        v-for="(arr,deviceName) in datas"
        :key="deviceName+'arr'"
        v-if="arr.length">
            <Col span="5">{{timeRange}}</Col>
            <Col span="5">{{deviceNameMap[deviceName]}}</Col>
            <Col span="5">
                <li v-for="(item,index) in arr" :key="deviceName+index">{{item.model}}</li>
            </Col>
            <Col span="4">
                <li v-for="(item,index) in arr" :key="deviceName+index+'count'">{{item.model_count}}</li>
            </Col>
            <Col span="5" class="delivery-color" >
                <span @click="goToDetail(key)">查看详情</span>
            </Col>
        </Row>

        <!-- 交付统计 ECharts 图表 -->
        <div class="echarts-wrap clear-fix" ref="echarts_wrap">
            <div 
            v-for="(arr,deviceName) in datas"
            :key="deviceName+'echart'"
            class="echarts-delivery" 
            :id="'e-' + deviceName" 
            v-show="arr.length">
            </div> 
        </div>
    </Card>	
</template>	

<script>
import util from '@/libs/util'
import { http, api } from '@/libs/http'
import echarts from 'echarts'
import dataCenter from '@/libs/dataCenter'

export default {
  data () {
    let now = Date.now()
    let dateBefore30 = now - 30 * 24 * 60 * 60 * 1000
    return {
      columns: [
        // 交付统计表头
        {
          title: '交付时间',
          key: 'type'
        },
        {
          title: '设备类型',
          key: 'time'
        },
        {
          title: '设备型号',
          key: 'name'
        },
        {
          title: '数量',
          key: 'target'
        },
        {
          title: '操作',
          key: 'value'
        }
      ],
      deviceNameMap: {
        gateway: '网关',
        lock: '门锁',
        elemeter: '电表',
        elecollector: '采集器',
        water_gateway: '水表网关',
        cold_meter: '冷水表',
        hot_meter: '热水表'
      },
      datas: {},
      device_type: 1,
      device_models: [{ name: 'cn-01' }, { name: 'cn-02' }, { name: 'cn-03' }],
      device_model: [],
      time: [new Date(dateBefore30), new Date(now)],
      timeRange: '',
      list1: [
        {
          value: 1,
          label: '网关'
        },
        {
          value: 2,
          label: '门锁'
        },
        {
          value: 3,
          label: '电表'
        },
        {
          value: 4,
          label: '采集器'
        },
        {
          value: 5,
          label: '水表网关'
        },
        {
          value: 6,
          label: '冷水表'
        },
        {
          value: 7,
          label: '热水表'
        }
      ],
      city: [],
      cities: []
    }
  },
  created () {
    this.getData(1) // 获取数据
    this.getCities()
  },
  methods: {
    getData (page) {
      let params = {
        startTime: new Date(this.time[0]).getTime(),
        endTime: new Date(this.time[1]).getTime()
      }
      if (this.device_type) {
        params.device_type = this.device_type
      }

      http.request(this, api.device_deliver_statistic, null, params, res => {
        if (res) {
          if (this.device_type === 0) {
            this.datas = res
          } else {
            let map = ['gateway', 'lock', 'elemeter', 'elecollector', 'water_gateway', 'cold_meter', 'hot_meter']

            this.datas = { [map[this.device_type]]: res }
          }
          // this.datas = testData;// 测试数据
          this.$nextTick(() => {
            this.renderEcharts(this.datas)
          })

          this.timeRange = new Date(params.startTime).Format('yyyy/MM/dd') + ' - ' + new Date(params.endTime).Format('yyyy/MM/dd')
        }
        this.isLoadig = false
      })
    },
    getCities () {
      dataCenter.getCities(this, null, res => {
        if (res) {
          this.cities = res
        }
      })
    },
    goToDetail (type) {
      // 到详情页
      util.log('detail', type)
      this.$emit('to-detail', type)
    },
    renderEcharts (data) {
      for (let key in data) {
        let modelArr = data[key]
        if (modelArr.length) {
          // 基于准备好的dom，初始化echarts实例
          let echarts_wrap_width = this.$refs.echarts_wrap.clientWidth

          let myChart = echarts.init(document.getElementById('e-' + key), null, { width: echarts_wrap_width / 2 })

          let models = []
          let model_counts = []
          modelArr.forEach(item => {
            models.push(item.model)
            model_counts.push(+item.model_count)
          })
          // util.log(models,model_counts)

          // 指定图表的配置项和数据
          let option = {
            title: {
              text: this.deviceNameMap[key]
            },
            tooltip: {},
            color: ['#56a1d5', '#05bac5'],
            label: {
              normal: {
                show: true,
                position: 'outside',
                color: '#000'
              }
            },
            legend: {
              data: ['设备数量']
            },
            xAxis: {
              data: models
              // max: 10
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '设备数量',
                type: 'bar',
                data: model_counts
              }
            ]
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
        }
      }
    }
  }
}
</script>

<style lang="less">
.delivery-table {
    border: 1px solid #e9eaec;
    border-bottom: none;
    text-align: center;
    padding: 10px 0;
    background: #fff;
    &:last-child {
        border-bottom: 1px solid #e9eaec;
    }
    li {
        list-style: none;
    }
    .delivery-color {
        color: #2d8cf0;
        cursor: pointer;
    }
}
.delivery-table-head {
    font-weight: bold;
}
.echarts-delivery {
    height: 300px;
    margin: 20px auto;
    float: left;
    width: 50%;
}
.clear-fix:after {
    display: table;
    content: '';
    clear: both;
}
</style>